import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1
import org.qtproject.qtquick 1.0

import "qrc:/js/resources/Constants.js" as Constant

import "../delegate"
import "../common"
import "../page"
import "../configure"
import "../message"

MainBasePage {
    id: id_createGroupPage
    width: Constant.width
    height: Constant.height

    m_header.title: "Create Group"
    m_header.showBack: true;
    m_header.imageMenuRight: "qrc:/images/resources/icon_check.png"
    m_header.onBackClicked: {
        console.log("m_header.onBackClicked: ");
        id_pageView.pop();
        //id_pageView.push(Qt.resolvedUrl("qrc:/Qml/gui/page/MainPage.qml"));
    }
    m_header.onRightMenuClicked: {
        if (id_txtGroupName.text.trim().length != 0) {
            ApplicationInfo.onCreateGroup(id_txtGroupName.text.trim());
        }
    }

    property real m_ratio : ApplicationInfo.ratio;
    property int m_margin: 10 * m_ratio;

    property int m_heightItem : 80 * m_ratio;
    property var uid: ApplicationInfo.activeUid;

    function addFriendToTextField(displayName) {
        id_txtGroupMember.insert(id_txtGroupMember.length, displayName);
        id_txtGroupMember.insert(id_txtGroupMember.length, " ; ");
        console.log("pppppppppppppppppppppppppppppppppppppppppp");
    }

    function deleteFriendFromTextField(displayName) {

    }

    Item {
        width: parent.width
        height: parent.height - m_header.height

        anchors.top: m_header.bottom;

        Item {
            id: id_itemTop
            width: parent.width
            height: parent.height / 6

            Row {
                width: parent.width- m_margin * 3
                height: parent.height - m_margin

                anchors.horizontalCenter: parent.horizontalCenter
                spacing: m_margin

                ItemImageChat {
                    id: imageGroupLogo
                    sourceImage: "qrc:/images/resources/icon_add_chat_group.png"

                    m_width: 80 * m_ratio
                    m_height: 80 * m_ratio
                }

                TextField {
                    id: id_txtGroupName
                    style :id_touchStyle
                    placeholderText: "GroupName (ex:Family)"
                    opacity: 0.5

                    width: parent.width - imageGroupLogo.width -m_margin
                    height: parent.height



                    onTextChanged: {
                        id_txtGroupName.opacity = 1

                        if (id_txtGroupName.length === 0) {
                            id_txtGroupName.opacity = 0.5
                        }
                    }
                }


            }
        }
        Item {
            id: id_itemMiddle
            width: parent.width
            height: parent.height / 8

            anchors.top: id_itemTop.bottom

            TextField {
                id: id_txtGroupMember
                style :id_touchStyle
                placeholderText: "Add people to group"
                opacity: 0.5


                inputMethodHints: Qt.ImhNoPredictiveText


                width: parent.width - m_margin* 2
                height: parent.height

                anchors.horizontalCenter: parent.horizontalCenter

                onTextChanged: {
                    id_txtGroupMember.opacity = 1

                    if (id_txtGroupMember.length === 0) {
                        id_txtGroupMember.opacity = 0.5
                    }
                }
                ListView {
                    id: id_listGroupFriend

                }
            }
        }
        Item {
            id: id_itemBottom
            width: parent.width
            height: parent.height - id_itemTop.height - id_itemMiddle.height

            anchors.top: id_itemMiddle.bottom

            ListView {
                id: id_friendList
                width: parent.width
                height: parent.height
                visible: true
                //spacing: 8

                delegate: GroupSearchFriendDelegate {
                    m_uid: uid
                }

                model: ApplicationInfo.friendListModel
            }

            ScrollBar {
                scrollArea: id_friendList;
                height: id_friendList.height;
                width: 8 * m_ratio
                anchors.right: id_friendList.right
            }
        }
    }

    Component {
        id: id_touchStyle
        TextFieldStyle {
            //textColor: "white"
            //font.pixelSize: 28 *m_ratio
            background: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    source: "qrc:/staticdata/images/textinput.png"
                    border.left: 8
                    border.right: 8
                    anchors.bottom: parent.bottom
                    anchors.left: parent.left
                    anchors.right: parent.right
                }
            }
        }
    }


    Component {
        id: touchStyle
        ButtonStyle {
            panel: Item {
                implicitHeight: 50
                implicitWidth: 320
                BorderImage {
                    anchors.fill: parent
                    antialiasing: true
                    border.bottom: 8
                    border.top: 8
                    border.left: 8
                    border.right: 8
                    anchors.margins: control.pressed ? -4 : 0
                    source: control.pressed ? "qrc:/staticdata/images/button_pressed.png" : "qrc:/staticdata/images/button_default.png"
                    Text {
                        text: control.text
                        anchors.centerIn: parent
                        color: "white"
                        font.pixelSize: 23
                        renderType: Text.NativeRendering
                    }
                }
            }
        }
    }

    Component.onCompleted: {
        id_txtGroupMember.selectWord();
    }

}

